<template>
	<app-layout class="box">
		<view class="concern" v-if="list.length > 0">
			<view class="concern-item" :style="item.style" v-for="(item,index) in list" :key="index"
				@click="jump(item)">
				<view class="concern-image">
					<!-- <video class="image" :autoplay="true" :loop="true" :muted="false" :controls="false" duration="10"
						:poster="item.vdetail[0].pic_url" :src="item.vdetail[0].url" :show-center-play-btn="false"
						:show-play-btn="false" :show-fullscreen-btn="false"></video> -->
					<image class="image" :src="item.cover_pic" mode=""></image>
					<image class="play"
						:src="imgprefix+'/web/uploads/mall1/20210331/50af8c15686da2c9044ce0769d010b3f.png'"></image>
				</view>
				<view class="concern-word">
					<view class="concern-con u-line-2">
						{{item.title}}
					</view>
				</view>
			</view>
		</view>
		<view class="" v-else>
			暂无信息
		</view>
	</app-layout>
</template>

<script>
	export default {
		data() {
			return {
				newList: [],
				boxHeight: [],
				list: [],
				columnHs: [], // 列高度
				aid: 0,
				title: '',
				apage: 1,
				alimit: 20,
				totalCount: 0,
				page_count: 0,
				appmsg: '',
				imgprefix: this.$siteInfo.imgroot
			}
		},
		onLoad(options) {
			// this.imgprefix = this.$siteInfo.imgroot
			this.loadlist(options.id)
			this.apptitle()
			this.aid = options.id
			if (options.title) {
				this.title = options.title
				uni.setNavigationBarTitle({
					title: options.title,
				});
			}

			uni.showShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		onReady() {
			if (this.title != '') {
				uni.setNavigationBarTitle({
					title: this.title
				})
			}
		},
		/* onReady() {
			if (this.title != '') {
				uni.setNavigationBarTitle({
					title: this.title,
				});
			}
		}, */
		onShareAppMessage() {
			return this.$shareAppMessage({
				path: '/pages/port/videolist',
				params: {

				}
			});
		},
		onShareTimeline() {
			return this.$shareTimeline({
				query: {

				}
			});
		},
		onReachBottom() {
			if (this.apage < this.page_count) {
				this.apage++;
				this.loadlist(this.aid)
			} else {
				let appList = this.$storage.getStorageSync('appvideoList')
				if (appList) {
					this.list = this.list.concat(appList)
				} else {
					this.loadlist(this.aid)
				}
			}
		},
		watch: {
			list: function(newVal, oldVal) {
				// console.log(newVal,666666,oldVal,777777777);
				if (newVal != oldVal) {
					// #ifdef MP-WEIXIN
					// this.newList = this.newList.concat(newVal)
					// console.log(this.newList);
					// #endif
					let mark = oldVal.length;
					let len = this.list.length;
					let style = '';
					this.$nextTick(async function() {
						const query = uni.createSelectorQuery().in(this);
						let dataArray = [];
						await new Promise((resolve, reject) => {
							query.selectAll('.concern .concern-item').fields({
								size: true
							}, data => {
								dataArray = data;
								resolve()
							}).exec();
						})
						for (let i = mark; i < len; i++) {
							if (i < 2) {
								if (i == 0) {
									style = `top: 0; left: 16rpx;`
								} else {
									style = `top: 0; left: 382rpx;`
								}
								this.boxHeight.push(dataArray[i].height)
							} else {
								let minHeight = this.boxHeight[0];
								if (minHeight > this.boxHeight[1]) {
									minHeight = this.boxHeight[1];
									this.boxHeight[1] = minHeight + dataArray[i].height;
									style = `top: ${minHeight*2 + 32 * Math.floor(i/2)}rpx; left: 382rpx;`
								} else {
									this.boxHeight[0] = minHeight + dataArray[i].height;
									style = `top: ${minHeight*2 + 32 * Math.floor(i/2)}rpx; left: 16rpx;`
								}
							}
							this.$set(newVal[i], 'style', style);
							this.$forceUpdate();
						}
					})
				}
			}
		},
		methods: {
			/* jump() {
				uni.showModal({
					content: this.appmsg || 'APP暂未上线，敬请期待...',
					showCancel: false,
					confirmText: '我知道了'
				})
				return;
			}, */
			jump(item) {
				if (item == 'javascript:;' || item == '/') {
					uni.showModal({
						content: this.appmsg || 'APP暂未上线，敬请期待...',
						showCancel: false,
						confirmText: '我知道了'
					})
					return;
				}
				if (item == '/pages/index/index' || item.indexOf('/pages/gospeed/index') != -1 || item == '/pages/sixty/index' ||
					item == '/pages/user-center/user-center' || item == '/pages/store/mine/mine') {
					uni.reLaunch({
						url: item
					})
					return;
				}
				// if (item.type == 3) {
				// 	uni.navigateTo({
				// 		url: '/pages/video/explain/explain?id=' + item.id + '&title=' + item.title
				// 	})
				// } else {
				uni.navigateTo({
					url: '/pages/video/videodetail/videodetail?id=' + item.id + '&title=' + item.title
				})
				// }
				/* uni.navigateTo({
					url: item
				}) */
			},
			apptitle() {
				this.$request({
					url: this.$api.article.detail,
					data: {
						article_id: 2
					}
				}).then(res => {
					this.appmsg = res.data.article.title
				})
			},
			toexplain(id, title) {
				uni.navigateTo({
					url: '/pages/video/explain/explain?id=' + id + '&title=' + title
				})
			},
			loadlist(id) {
				this.$request({
					url: this.$api.topic.list,
					data: {
						type: id,
						page: this.apage,
						limit: this.alimit,
					}
				}).then((res) => {
					this.list = this.list.concat(res.data.list)
					this.page_count = res.data.pagination.page_count

					this.$storage.setStorageSync('appvideoList', this.list)
				}).catch(err => {

				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.box {
		// display: flex;
		// flex-direction: row;
		// margin: 0 auto;
	}

	.concern {
		/* display: flex;
		flex-wrap: wrap;
		justify-content: space-between; */
		position: relative;
		margin: 24rpx auto;
		// width: 686rpx;

		.concern-item {
			position: absolute;
			top: 0;
			left: 0;
			background: #FFFFFF;
			border-bottom: 1rpx solid #EFF0F3;
			width: 350rpx;
			border-radius: 16rpx;
			overflow: hidden;
			// margin: 24rpx 0;
			margin-top: 24rpx;

			.concern-image {
				width: 100%;
				height: 470rpx;
				position: relative;

				.image {
					width: 100%;
					height: 100%;
				}

				.play {
					position: absolute;
					/* width: 80rpx;
					height: 80rpx;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%); */
					width: 40rpx;
					height: 40rpx;
					top: 30rpx;
					right: 30rpx;
				}
			}

			.concern-word {
				margin: 8rpx 14rpx 24rpx;
				font-size: 24rpx;
				line-height: 36rpx;
				color: rgba(0, 0, 0, 0.84);
				// max-height: 68rpx;

				.concern-name {
					color: rgba(0, 0, 0, 0.84);
					font-size: 32rpx;
					line-height: 48rpx;
				}

				.concern-con {
					font-weight: 700;
					color: rgba(0, 0, 0, 0.56);
					font-size: 24rpx;
					line-height: 36rpx;
				}
			}
		}
	}
</style>
